<template>
  <div class="sduty" v-if="$route.query.applicationId != '444155096561877957'">
    <!--    <div class="banner">-->
    <!--      <div class="content">-->
    <!--        <div class="navbox" style="width: 1200px; margin: 0 auto;position: relative;">-->
    <!--          <nvas class="nvas" :list="navList" @choose="choose"></nvas>-->
    <!--          <div class="imgList">-->
    <!--            <img src="../../../assets/home.png" alt />-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="userhead">
      <div class="box_2 flex-col justify-end">
        <div class="group_3 flex-row">
          <img
            class="image_1"
            referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/SketchPng04b4eec64c503b4c60aefb0bfc9400a5fdeaafc6ae338f4c3682c067ba99df75"
          />
          <div class="box_14 flex-col justify-between">
            <div class="group_11 flex-row justify-between">
              <span class="text_15">刘明华丨角色</span>
              <div class="group_5 flex-row">
                <img
                  class="thumbnail_6"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss.lanhuapp.com/SketchPng4cf250bfa16d61d6c933d37c5a127d79a572a1babb46435c8dc2a41b8bf93b75"
                />职业名称
                <span class="text_16">职业名称</span>
              </div>
            </div>
            <div class="text-wrapper_39 flex-row">
              <span class="text_17">在线时长</span>
              <span class="text_18">120</span>
              <span class="text_19">登录总次数</span>
              <span class="text_20">200</span>
              <span class="text_21">PC端登录总次数</span>
              <span class="text_20">100</span>
              <span class="text_21">移动端登录总次数</span>
              <span class="text_20">100</span>
            </div>
          </div>

          <img
            class="image_2"
            referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/SketchPngb948a454e8dfbd99cf3ffd864fe16264abab7a70b514ebcc8f532a8e6cc6666e"
          />
        </div>
      </div>
    </div>
    <!--    <div class="keBox2" style="width: 1200px; margin: 0 auto;" v-if="examlist.length != 0">-->
    <!--&lt;!&ndash;      <div class="keTitle">&ndash;&gt;-->
    <!--&lt;!&ndash;        <h1 style="float: left;">待考任务 ( {{ examlist.length }} 个 )</h1>&ndash;&gt;-->
    <!--&lt;!&ndash;        &lt;!&ndash; <p style="float: right;font-size: 15px;line-height: 80px; cursor: pointer;color: #666;" > 查看更多<i&ndash;&gt;-->
    <!--&lt;!&ndash;        class="el-icon-arrow-right"></i></p>&ndash;&gt;&ndash;&gt;-->
    <!--&lt;!&ndash;      </div>&ndash;&gt;-->
    <!--      <div class="keList">-->
    <!--        <div class="keItem" v-for="(item,idx) in examlist" style="width: 385px;   background: #f6faff;height: 120px;  position: relative;" :key="idx" @click="goExam(item)">-->
    <!--          <p style="position: absolute; top:20px;right:20px;color:#44b44f;font-size:16px;"> 进行中 </p>-->
    <!--          <el-card style=" background: #f6faff;" :body-style="{ padding: '0px' }" shadow="hover">-->
    <!--            &lt;!&ndash; <el-image-->
    <!--              style="margin: 0px auto;margin-top:10px; width:80px;height:80px"-->
    <!--              src="https://cdn.traingo.cn/study/img/type-3.a9f0a0a6.png"-->
    <!--              class="image"-->
    <!--            /> &ndash;&gt;-->
    <!--            <div class="dec" style="margin-top: 0;height:100px">-->
    <!--              <el-image-->
    <!--              style="width:60px;height:60px;float:left"-->
    <!--              src="https://cdn.traingo.cn/study/img/type-3.a9f0a0a6.png"-->
    <!--              class="image"-->
    <!--            />-->
    <!--              <span class="spantitle" style="line-height: 40px; margin-left:15px">        {{ item.fullName }}  </span>-->

    <!--              <div class="bottom" style=" position: absolute; bottom:20px;left:90px;">-->
    <!--                <span>{{ item.startDatetime }}~ {{ item.endDatetime }}</span>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </el-card>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="bacColor" style="width: 100vw; background: #fff; left: 0">
      <div class="keBox" style="width: 1200px; margin: 0 auto">
        <div class="keTitle">
          <h1 style="float: left">最近更新视频</h1>
          <!--          <p-->
          <!--            style="float: right;font-size: 15px;line-height: 80px; cursor: pointer;color: #666;"-->
          <!--            @click="toMore"-->
          <!--          >-->
          <!--            查看更多-->
          <!--            <i class="el-icon-arrow-right"></i>-->
          <!--          </p>-->
        </div>

        <div class="keList">
          <div
            class="keItem"
            v-for="item in keList"
            @click="toDetail(item.id)"
            :key="item.id"
          >
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <el-image :src="define.APIURl + item.cover" class="image" />

              <div class="dec">
                {{ item.name }}
                <div class="bottom">
                  <span>{{ item.teacher || "暂无教师" }}</span>
                  <span>{{ item.learnUsers || 0 }}人学习</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>

    <div class="table" style="margin-left: 1px">
      <h1 style="float: left">最近更新考试</h1>
      <el-table :data="tableData" height="250" border style="width: 100%">
        <el-table-column prop="date" label="序号" width="200">
        </el-table-column>
        <el-table-column prop="name" label="培训开始时间" width="240">
        </el-table-column>
        <el-table-column prop="address" label="专题名称" width="700">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { TemsCourseCatalog, TemsCourseList } from "../../../api/study";
import nvas from "../components/navList";
import request from "@/utils/request";
import define from "@/utils/define";
import { getSystemBaseConfig } from "@/api/system/sysConfig.js";
export default {
  name: "sduty",
  components: {
    nvas,
  },
  data() {
    return {
      keList: [{}, {}, {}, {}, {}, {}, {}, {}],
      examlist: [],
      systemBaseConfig: {},
      tableData: [
        {
          date: "100",
          name: "2024-12-30 08:30:00",
          address:
            "专题名称专题名称专题名称专题名称专题名称专题名称专题名称专题名称",
        },
        {
          date: "99",
          name: "2024-12-30 08:30:00",
          address: "专题名称专题名称专题名称专题名称专题专题名称",
        },
        {
          date: "98",
          name: "2024-12-30 08:30:00",
          address:
            "专题名称专题名称专题名称专题名称专题名称专题名称专题名称专题名称",
        },
        {
          date: "97",
          name: "2024-12-30 08:30:00",
          address: "专名称专题名称专题名称",
        },
        {
          date: "96",
          name: "2024-12-30 08:30:00",
          address:
            "专题名称专题名称专题名称专题名称专题名称专题名称专题名称专题名称",
        },
        {
          date: "95",
          name: "2024-12-30 08:30:00",
          address:
            "专题名称专题名称专题名称专题名称专题名称专题名称专题名称专题名称",
        },
      ],
      keList2: [
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/cover/e489c277-5a3c-415c-a81c-3fd06c0200fe.jpeg",
          dec: "职场着装速成指南",
        },
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/cover/696f14eb-47b2-4d8f-893e-e4b3ca205950.jpeg",
          dec: "职业道德专业培训",
        },
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/cover/696f14eb-47b2-4d8f-893e-e4b3ca205950.jpeg",
          dec: "办公软件专题学习",
        },
        {
          imgUrl:
            "	https://data.traingo.cn/data1/134/cover/c436c814-49e7-4e16-9457-77e497b8d90d.jpeg",
          dec: "领导力专职培训",
        },
      ],
      keList4: [
        {
          imgUrl:
            "https://cdn.traingo.cn/study/img/knowledge_cover.db876535.png",
          dec: "节目活动邀约",
        },
        {
          imgUrl:
            "https://cdn.traingo.cn/study/img/knowledge_cover.db876535.png",
          dec: "五零星光1对1实操检测",
        },

        {
          imgUrl:
            "https://cdn.traingo.cn/study/img/knowledge_cover.db876535.png",
          dec: "锤子坚果手机新品发布PPT模板",
        },

        {
          imgUrl:
            "https://cdn.traingo.cn/study/img/knowledge_cover.db876535.png",
          dec: "领导力专职培训",
        },
      ],
      keList5: [
        {
          imgUrl:
            "	https://data.traingo.cn/data1/134/cover/6f7eb294-7a55-48b7-a784-7b1a0988785f.jpeg",
          dec: "2022互联网技术与应用",
        },
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/cover/0415ee6a-4d72-43b1-9db4-54d6e7845ad9.jpeg",
          dec: "2022互联网技术与应用",
        },

        {
          imgUrl:
            "	https://data.traingo.cn/data1/134/cover/b12e84f0-3bc0-49cb-b321-bbcc61f0ca59.jpeg",
          dec: "锤子坚果手机新品发布PPT模板",
        },
        {
          imgUrl:
            "	https://data.traingo.cn/data1/134/cover/62e6b648-28e0-41b0-ae73-f05f565e4adf.jpeg",
          dec: "领导力专职培训",
        },
      ],
      teachers: [
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/avatar/837eb829-76a4-414e-9593-a0d20052dd0d.jpeg",
          name: "袁小芹",
          level: "初级讲师",
          dec: "2022互联网技术与应用",
        },
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/avatar/837eb829-76a4-414e-9593-a0d20052dd0d.jpeg",
          name: "陈珊",
          level: "初级讲师",
          dec: "2022互联网技术与应用",
        },
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/avatar/c429ad3c-1906-4e44-8014-26c58c1bd5c7.jpeg",
          name: "万华语",
          level: "初级讲师",
          dec: "2022互联网技术与应用",
        },
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/avatar/c429ad3c-1906-4e44-8014-26c58c1bd5c7.jpeg",
          name: "刘江平",
          level: "初级讲师",
          dec: "2022互联网技术与应用",
        },
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/avatar/1d28fd99-77b0-49c4-adbc-6563c29107a6.jpeg",
          name: "王伟瓦",
          level: "中级讲师",
          dec: "2022互联网技术与应用",
        },
        {
          imgUrl:
            "https://data.traingo.cn/data1/134/avatar/1d28fd99-77b0-49c4-adbc-6563c29107a6.jpeg",
          name: "刘娇娇",
          level: "初级讲师",
          dec: "2022互联网技术与应用",
        },
      ],
      navList: [],
      chpSumList: [],
    };
  },
  computed: {
    sysConfig() {},
  },
  created() {
    if (this.$route.query.applicationId == "444155096561877957") {
      this.$router.replace("/dashboard");
    }
    this.getExamList();
    this.getCategoryList();
    this.getList();
    this.getChpSumList();
    this.getSystemBaseConfigFn();
  },
  methods: {
    getSystemBaseConfigFn() {
      getSystemBaseConfig().then((res) => {
        this.systemBaseConfig = res.data;
      });
    },
    goExam(v) {
      this.$router.push("/examWeb/index?id=" + v.id);
    },
    choose(v, fv) {
      this.$router.push(`/course/center?category=${v}&categoryF=${fv}`);
    },
    toMore() {
      this.$router.push(`/course/center`);
    },
    toDetail(id) {
      this.$router.push(`/course/detail?id=${id}`);
    },
    getExamList() {
      request({
        url: `/api/exam/TemsExam/myExamList`,
        method: "post",
        data: {
          currentPage: 1,
          pageSize: 99,
          sidx: "",
          sort: "desc",
          enabledMark: 0,
          timeMark: 20,
          fullName: "",
        },
      }).then((res) => {
        this.examlist = [...res.data.list];
        // this.listLoading = false;
      });
    },
    getCategoryList() {
      TemsCourseCatalog({}).then((res) => {
        // console.log('tes', res)
        this.navList = res.data.list;
        console.log("this.navList", this.navList);
      });
    },
    getList() {
      TemsCourseList({
        currentPage: 1,
        menuId: "586873294968327685",
        pageSize: 8,
        sidx: "",
        sort: "desc",
        enabledMark: "20",
      }).then((res) => {
        this.keList = res.data.list;
      });
    },
    //积分统计
    getChpSumList() {
      request({
        url: `/api/course/TemsChpLogs/getChpSum`,
        method: "post",
        data: { type: "" },
      }).then((res) => {
        this.chpSumList = res.data;
        this.listLoading = false;
      });
    },
  },
};
</script>
<style lang="scss">
.componey {
  display: none !important;
}

.el-carousel__item {
  background-color: #fff;
}

.is-active {
  .dask {
    opacity: 0;
  }
}
</style>
<style lang="scss" scoped>
.group_3 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  width: 1132px;
  height: 130px;
  margin: 24px 0 0 24px;
  display: flex;
  flex-direction: row;
}

.image_1 {
  width: 70px;
  height: 70px;
  margin: 30px 0 0 40px;
}

.box_14 {
  width: 340px;
  height: 62px;
  margin: 38px 0 0 19px;
  display: flex;
  flex-direction: column;
}

.group_11 {
  width: 238px;
  height: 24px;
  display: flex;
  flex-direction: row;
}

.text_15 {
  width: 120px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(50, 50, 50, 1);
  font-size: 20px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-top: 2px;
}

.group_5 {
  background-color: rgba(34, 101, 238, 1);
  border-radius: 12px;
  width: 98px;
  height: 24px;
}

.thumbnail_6 {
  width: 16px;
  height: 16px;
  margin: 4px 0 0 14px;
}

.text_16 {
  width: 48px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
  margin: 6px 16px 0 4px;
}

.text-wrapper_39 {
  width: 340px;
  height: 24px;
  margin-top: 14px;
  display: flex;
  flex-direction: row;
}

.text_17 {
  width: 56px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(83, 99, 135, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 20px;
  margin-top: 3px;
}

.text_18 {
  width: 29px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(34, 101, 238, 1);
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 4px;
}

.text_19 {
  width: 70px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(83, 99, 135, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 20px;
  margin: 3px 0 0 20px;
}

.text_20 {
  width: 33px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(34, 101, 238, 1);
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 4px;
}

.text_21 {
  width: 104px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(83, 99, 135, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 20px;
  margin: 3px 0 0 20px;
}
.image_2 {
  width: 206px;
  height: 130px;
  margin: 0 200px 0 400px;
}
.table {
  margin-left: 0;
}

.sduty {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.userhead {
  width: 1400px;
  height: 130px;
  margin-left: 24px;

  background: #ffffff;
  border-radius: 8px;
}
.top {
  // position: absolute;
  width: 143px;
  height: 222px;
  position: absolute;

  display: flex;
  // flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  color: #f90;
  line-height: 26px;

  .name {
    margin-top: 34px;
  }

  .avatar {
    width: 100%;

    img {
      width: 46px;
      height: 46px;
      border-radius: 50%;
    }
  }
}
.spantitle {
  display: inline-block;
  width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.top1 {
  color: #f90;
  left: 210px;
  top: -15px;
}

.top2 {
  color: #666;
  left: 71px;
  top: 20px;
}

.top3 {
  color: #e07d48;
  right: 68px;
  top: 45px;
}

.ranks-title {
  text-align: center;
  height: 60px;
  line-height: 60px;

  .box {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 43px;
    padding: 0 5px;
    width: 120px;
    margin: 0 auto;
    position: relative;
  }

  .box::after {
    content: "";
    width: 40px;
    height: 43px;
    position: absolute;
    right: -38px;
    background-size: 100% 100%;
  }

  .box::before {
    content: "";
    width: 40px;
    height: 43px;
    position: absolute;
    left: -38px;
    background-size: 100% 100%;
  }

  .box1 {
    background: linear-gradient(134deg, #854bff, #e47aba);
  }

  .box2 {
    background: linear-gradient(134deg, #ea4b84, #e47ada);
  }

  .box3 {
    background: linear-gradient(134deg, #0ccbcb, #94daf0);
  }

  .box4 {
    background: linear-gradient(134deg, #26c7ae, #7be185);
  }

  .box1::before {
    background-image: url();
  }

  .box1::after {
    background-image: url();
  }

  .box2::after {
    background-image: url();
  }

  .box2::before {
    background-image: url();
  }

  .box3::after {
    background-image: url();
  }

  .box3::before {
    background-image: url();
  }

  .box4::after {
    background-image: url();
  }

  .box4::before {
    background-image: url();
  }
}

.keBox4 {
}

.dask {
  position: absolute;
  left: 0;
  height: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.userInfo {
  color: #626463;

  width: 100%;
  display: flex;

  height: 50px;
  padding: 11px 16px;
  line-height: 40px;
  font-size: 14px;
  color: #626463;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

  .num {
    width: 30px;
    text-align: center;
  }

  .avatar {
    width: 130px;
    line-height: 28px;

    img {
      float: left;
      margin-right: 15px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
    }
  }

  .department {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    width: 180px;
  }

  .time {
    width: 100px;
  }
}

.userInfo:nth-child(2n + 1) {
  background-color: #fafafa !important;
}

.banner {
  background: rgb(21, 107, 246);
  height: 400px;
  width: 100%;
}

.content {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.imgList {
  position: absolute;
  left: 238px;

  top: 0;
  width: 869px;
  height: 389px;

  img {
    width: 100%;
  }
}

.nvas {
}

.keTitle {
  height: 60px;
  line-height: 60px;

  p {
    transition: 0.3s all;
  }

  p:hover {
    color: rgb(21, 107, 246) !important;
  }
}

.keList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .keItem {
    cursor: pointer;
    transition: 0.2s all;
    margin-bottom: 20px;
    border-radius: 15px;
    //  float: left;
    width: 285px;
    height: 309px;

    // margin-right: 20px;
    img {
      width: 285px;
      height: 161px;
    }
  }

  .keItem:not(:nth-child(3n + 1)) {
    margin-left: 20px;
  }
}

.keItem:hover {
  color: rgb(21, 107, 246);

  .dec {
    color: rgb(21, 107, 246);
  }
}

.keList::after {
  content: "";
  flex: 1;
}

.keList4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 20px 20px 0 20px;
  border-radius: 8px;
  width: 100%;

  .keItem4 {
    cursor: pointer;
    margin-bottom: 35px;
    width: 550px;

    height: 138px;
    background-color: #f5f7fa;
    float: left;

    .image {
      float: left;
      width: 104px;
      height: 138px;
    }

    .right {
      float: left;
      font-size: 15px;
      // width: 4px;
      width: 300px;
      height: 80px;
      text-align: left;
      padding: 20px;
      line-height: 35px;
      color: #999;

      .keItemTle {
        color: #000;
        margin-top: -15px;
        margin-bottom: 25px;
      }
    }
  }

  .keItem4:hover {
    .keItemTle {
      color: rgb(21, 107, 246) !important;
    }
  }

  // .keItem4:after{
  //   flex: 0 !important;
  // }
  // .keItem4:nth-child(4n) {
  //   margin-left: 20px !important;
  // }
}

.dec {
  transition: 0.5s all;
  height: 285px;
  height: 148px;
  padding: 20px 16px;
  font-size: 18px;
  font-weight: bold;
  position: relative;

  .bottom {
    width: 90%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 20px;
    color: #999;
    font-size: 14px;
  }
}

.keBox3 {
  padding: 5px 20px;

  border-radius: 8px;
  background: linear-gradient(130deg, #d6e3fb, #d3f3e5 76.07%);
  box-shadow: 0 0 10px hsla(0, 0%, 58%, 0.1);
}

.time {
}

.teachersItem {
  cursor: pointer;
  width: 184px;
  height: 294px;
  position: relative;

  .image {
    width: 100%;
  }

  .level {
    position: absolute;
    bottom: 2px;
    left: 0;
    padding: 2px 12px;
    color: #fff;
    font-size: 14px;
    line-height: 26px;
    min-height: 26px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    z-index: 1;
    background-color: rgba(55, 125, 255, 0.7);
  }

  .buttomText {
    padding-left: 15px;
    height: 50px;
    transition: 0.2s all;

    p {
      color: #999;
      font-size: 14px;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;

      line-height: 26px;

      word-wrap: break-word;
    }
  }
}

.teachersItem:hover {
  .buttomText {
    height: 100px;
  }
}

.image {
  width: 100%;
  height: 161px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.foot {
  // position: fixed;
  // bottom: 0;
  width: 100%;
  height: 90px;
  background-color: #2f2e2e;
  line-height: 90px;
  font-size: 12px;
  color: grey;
  text-align: center;
}
</style>
